<template>
  <div>
    <el-form inline class="query-form">

      <!-- 内容输入框 -->
      <el-form-item>
        <el-input
            v-model="queryParams.keyword"
            placeholder="请输入内容"
            size="small"
            suffix-icon="el-icon-search"
            style="width: 180px;"
        ></el-input>
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button
            class="screen-btn"
            size="small"
            @click="handleQuery"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果区域 -->
    <div class="result-container">
      <!-- 图表行区域 -->
      <div class="chart-row">
        <!-- 图表1 -->
        <div class="chart-item" style="flex: 2">
          <Top10DispatcherCounts :tableData="top10TableData" />
        </div>

        <!-- 图表2 -->
        <div class="chart-item" style="flex: 3">
          <dv-border-box-10>
            <SixStatsChart />
          </dv-border-box-10>
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-area">
        <DispatcherOverviewTable style="width: 100%;" />
      </div>
    </div>
  </div>
</template>

<script>
import Top10DispatcherCounts from "@/views/stats/CarUnitStats/chart/Top10DispatcherCounts/index.vue";
import SixStatsChart from "@/views/stats/CarUnitStats/chart/SixStatsChart/index.vue";
import DispatcherOverviewTable from "@/views/stats/dispatcher/DispatcherOverviewTable.vue";
export default {
  components: {
    Top10DispatcherCounts,
    SixStatsChart,
    DispatcherOverviewTable
  },
  data() {
    return {
      // 时间范围选择器
      queryTime: null,
      // 查询参数
      queryParams: {
        keyword: '',
        startTime: '',
        endTime: ''
      },
      top10TableData: [
        ['车组1', "<span  class='colorGrass'>56</span>"],
        ['车组2', "<span  class='colorGrass'>50</span>"],
        ['车组3', "<span  class='colorGrass'>32</span>"],
        ['车组4', "<span  class='colorGrass'>28</span>"],
        ['车组5', "<span  class='colorGrass'>18</span>"],
        ['车组6', "<span  class='colorGrass'>9</span>"],
        ['车组7', "<span  class='colorGrass'>7</span>"],
        ['车组8', "<span  class='colorGrass'>4</span>"],
        ['车组9', "<span  class='colorGrass'>4</span>"],
        ['车组10', "<span  class='colorGrass'>1</span>"]
      ]
    }
  },
  methods: {

    // 处理查询
    handleQuery() {

    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>

.query-form {
  .el-form-item {
    margin-right: 15px;
    margin-bottom: 5px;
  }

  .el-button {
    margin-right: 8px;
  }
}

// 结果区域外层容器（控制图表和表格的垂直布局）
.result-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px; // 图表行与表格之间的间距
}

// 图表行布局
.chart-row {
  padding: 20px;
  display: flex;
  gap: 20px;
}

// 单个图表容器样式
.chart-item {
  flex: 1; // 均分宽度
  padding: 5px;
}
</style>
